﻿
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>-->
    <title>relative-具体文章</title>
    <link href="/LayuiBlog/images/favicon.ico"  rel="icon" type="image/x-icon" />
    <link rel="shortcut icon" href="/LayuiBlog/images/favicon.ico" type="image/x-icon">
    <!--Layui-->
    <link href="/LayuiBlog/plug/layui/css/layui.css" rel="stylesheet"/>
    <!--font-awesome-->
    <link href="/LayuiBlog/plug/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
    <!--全局样式表-->
    <link href="/LayuiBlog/css/global.css" rel="stylesheet"/>
    <!-- 比较好用的代码着色插件 -->
    <link href="/LayuiBlog/css/prettify.css" rel="stylesheet"/>
    <!-- 本页样式表 -->
    <link href="/LayuiBlog/css/detail.css" rel="stylesheet"/>
    <!--    editor.md-->
    <link rel="stylesheet" href="/static/editormd/css/editormd.preview.css"/>
    <!--    代码高亮-->
    <link rel="stylesheet"
          href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/default.min.css">

    <link href="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js"></script>
</head>
<body>
<!-- 导航 -->
<nav class="blog-nav layui-header">
    <div class="blog-container">
        <!-- QQ互联登陆 -->
        <!--            <a href="javascript:;" class="blog-user">-->
        <!--            <i class="fa fa-qq" >登录</i>-->
        <!--            </a>-->

        <!--            <a href="javascript:;" class="blog-user layui-hide">-->
        <!--                <img src="../images/Absolutely.jpg" alt="Absolutely" title="Absolutely" />-->
        <!--            </a>-->
        <!-- 不落阁 -->
        <a class="blog-logo" href="/home">relative</a>
        <!-- 导航菜单 -->
        <ul class="layui-nav" lay-filter="nav">
            <li class="layui-nav-item layui-this">
                <a href="" th:href="@{/home}"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
            </li>
            <li class="layui-nav-item">
                <a href="" th:href="@{/article}"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
            </li>
            <li class="layui-nav-item">
                <a href="/resource"><i class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a>
            </li>
            <li class="layui-nav-item">
                <a href="/timeline"><i class="fa fa-hourglass-half fa-fw"></i>&nbsp;点点滴滴</a>
            </li>
            <li class="layui-nav-item">
                <a href="/about"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
            </li>
            <li class="layui-nav-item adminUserCss" style="float: right">
                <a href="/register">注册</a>
            </li>
            <li class="layui-nav-item adminUserCss" style="float: right">
                <a href="/login">登录</a>
            </li>
        </ul>


        <!-- 手机和平板的导航开关 -->
        <a class="blog-navicon" href="javascript:;">
            <i class="fa fa-navicon"></i>
        </a>
    </div>
</nav>
<!-- 主体（一般只改变这里的内容） -->
<div class="blog-body">
    <div class="blog-container">
        <blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow">
            <a href="/home" title="网站首页">网站首页</a>
            <a href="/article" title="文章专栏">文章专栏</a>
            <a><cite  th:text="${blog.getTitle()}">基于layui的laypage扩展模块！</cite></a>
        </blockquote>
        <div class="blog-main">
            <div class="blog-main-left">
                <!-- 文章内容（使用Kingeditor富文本编辑器发表的） -->
                <div class="article-detail shadow">
                    <div class="article-detail-title" th:text="${blog.getTitle()}">
                        基于laypage的layui扩展模块（pagesize.js）！
                    </div>
                    <div class="article-detail-info">
                        最新更新于<span th:text="${#dates.format(blog.getUpdateTime(),'yyyy-MM-dd HH:mm:ss')}">编辑时间：2017/3/18 17:30:22</span>
                        作者:<span th:text="${blog.getUser().getUsername()}">作者：Absolutely</span>
                        浏览量:<span th:text="${blog.getViews()}">浏览量：12</span>
                    </div>
                    <div class="article-detail-content" id="test-markdown-view">
                        <!-- Server-side output Markdown text -->
                        <textarea style="display:none;" th:text="${blog.getContent()}">### Hello world!</textarea>
                    </div>
                    <!--版权声明 -->
                    <div class="article-detail-copyright" th:if="${blog.getUserId()} eq 1">
                        <p>版权声明：本文由<a href="http://apenixx.top" target="_blank" style="color:#1E9FFF;margin:0 5px;">liuhaoqi</a>原创出品，转载请注明出处！</p>
                        <!--<p>本文链接：<a th:href="@{'/article/details/'+${info.articleId}}">http://www.apenixx.top/article/details/<span th:text="${info.articleId}">52</span></a></p>-->
                        <p>本文链接：<a  th:href="@{/detailBlog/{id}(id=${blog.getId()})}" th:text="${#httpServletRequest.getRequestURL() }"></a></p>
                    </div>
                    <div class="article-detail-copyright" th:if="${blog.getUserId()} eq 2">
                        <p>本文为转载文章，上文已注明出处</p>
                        <p>本文链接：<a  th:href="@{/detailBlog/{id}(id=${blog.getId()})}" th:text="${#httpServletRequest.getRequestURL() }"></a></p>
                    </div>
                    <!--预览区-->
                    <div id="preview-colum">
                        <div id="preview"></div>
                    </div>
                </div>
                <!-- 评论区域 -->
                <div class="blog-module shadow" style="box-shadow: 0 1px 8px #a6a6a6;">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-bottom:0">
                        <legend>来说两句吧</legend>
                        <div class="layui-field-box">
                            <form class="layui-form blog-editor" action="">
                                <div class="layui-form-item">
                                    <textarea name="editorContent" lay-verify="content" id="remarkEditor"
                                              placeholder="请输入内容" class="layui-textarea layui-hide"></textarea>
                                </div>
                                <div class="layui-form-item">
                                    <button id="commentpost-btn" class="layui-btn" lay-submit lay-filter="formRemark" >提交评论
                                    </button>
                                </div>
                            </form>
                        </div>
                    </fieldset>
                    <div class="blog-module-title">最新评论</div>
                    <ul class="blog-comment" th:fragment="commentList">
                        <li id="comment01">
                            <div class="comment-parent">
                                <img th:src="@{https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1274822784,873975028&fm=26&gp=0.jpg}"
                                     alt="absolutely"/>
                                <div class="info">
                                    <span class="username">游客</span>
                                    <span class="time">2017-03-18 18:46:06</span>
                                </div>
                                <div class="content">
                                    我为大家做了模拟评论功能！还有，这个评论功能也可以改成和留言一样，但是目前没改，有兴趣可以自己改
                                </div>
                                <p class="info info-footer"><span class="time"><i class="fa fa-clock-o"
                                                                                  aria-hidden="true"></i>&nbsp;2020-04-20 00:24</span>&nbsp;<i
                                        class="fa fa-map-marker"></i>&nbsp;陕西省西安市&nbsp;&nbsp;
                                    <a class="btn-reply" href="javascript:;" data-commentid="1"
                                       data-commentnickname="Matt" onclick="btnReplyClick_detail(this)">回复</a>
                                </p>
                            </div>
                            <!--回复评论-->
                            <div class="replycontainer layui-hide">
                                <form class="layui-form" action="">
                                    <div class="layui-form-item"><textarea name="replyContent"
                                                                           lay-verify="replyContent"
                                                                           placeholder="@大西瓜" class="layui-textarea"
                                                                           style="min-height:80px;"></textarea>
                                    </div>
                                    <div class="layui-form-item">
                                        <button class="layui-btn" lay-submit="formReply1" lay-filter="formReply1">
                                            提交
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </li>
                    </ul>
                </div>


            </div>
            <div class="blog-main-right">
                <!--右边悬浮 平板或手机设备显示-->
                <div class="category-toggle"><i class="fa fa-chevron-left"></i></div>
                <!--这个div位置不能改，否则需要添加一个div来代替它或者修改样式表-->
                <div class="article-category shadow">
                    <div class="article-category-title">分类导航</div>
                    <a href="javascript:layer.msg(&#39;切换到相应分类&#39;)"
                       th:href="@{/category(categoryname=${category.getCategoryname()})}"
                       th:each="category:${categoryList}" th:text="${category.getCategoryname()}">ASP.NET MVC</a>
                    <div class="clear"></div>
                </div>
                <div class="blog-module shadow">
                    <div class="blog-module-title">我的推荐</div>
                    <ul class="fa-ul blog-module-ul" th:each="blog:${blogListNoFenYe}">
                        <li><i class="fa-li fa fa-hand-o-right"></i><a
                                                                       th:if="${blog.getRecommend()} eq 1 "
                                                                       th:text="${blog.getTitle()}"
                                                                       th:href="@{/detailBlog/{id}(id=${blog.getId()})}">Web安全之跨站请求伪造CSRF</a>
                        </li>
                    </ul>
                </div>
                <div class="blog-module shadow">
                    <div class="blog-module-title">随便看看</div>
                    <ul class="fa-ul blog-module-ul" th:each="blog:${blogListNoFenYe}">
                        <li><i class="fa-li fa fa-hand-o-right"></i><a th:text="${blog.getTitle()}"
                                                                       th:href="@{/detailBlog/{id}(id=${blog.getId()})}">一步步制作时光轴（一）（HTML篇）</a>
                        </li>

                    </ul>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>
<div class="demo">
    <div id="player">
    </div>
</div>
<!-- 底部 -->
<footer class="blog-footer">
<!--    <p><span>Copyright</span><span>&copy;</span><span>2017</span><a href="http://www.lyblogs.cn">不落阁</a><span>Design By LY</span>-->
<!--    </p>-->
<!--    <p><a href="http://www.miibeian.gov.cn/" target="_blank">蜀ICP备16029915号-1</a></p>-->
</footer>
<!--侧边导航-->
<ul class="layui-nav layui-nav-tree layui-nav-side blog-nav-left layui-hide" lay-filter="nav">
    <li class="layui-nav-item">
        <a th:href="@{/home}"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
    </li>
    <li class="layui-nav-item layui-this">
        <a th:href="@{/article}"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
    </li>
    <li class="layui-nav-item">
        <a th:href="@{/resource}"><i class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a>
    </li>
    <li class="layui-nav-item">
        <a th:href="@{timeline}"><i class="fa fa-road fa-fw"></i>&nbsp;点点滴滴</a>
    </li>
    <li class="layui-nav-item">
        <a th:href="@{/about}"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
    </li>
</ul>
<!--分享窗体-->
<div class="blog-share layui-hide">
    <div class="blog-share-body">
        <div style="width: 200px;height:100%;">
            <div class="bdsharebuttonbox">
                <a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                <a class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
                <a class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
                <a class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
            </div>
        </div>
    </div>
</div>
<!--遮罩-->
<div class="blog-mask animated layui-hide"></div>
<!-- layui.js -->
<script src="/LayuiBlog/plug/layui/layui.js"></script>
<!-- 自定义全局脚本 -->
<script src="/LayuiBlog/js/global.js"></script>
<!-- 比较好用的代码着色插件 -->
<!--<script src="LayuiBlog/js/prettify.js"></script>-->

<script src="/LayuiBlog/js/prettify.js" type="text/javascript"></script>
<!-- 本页脚本 -->
<script src="/LayuiBlog/js/detail.js" type="text/javascript"></script>

<script src="/LayuiBlog/js/jquery-min.js" type="text/javascript"></script>
<!--editor.md-->
<script src="/static/editormd/lib/marked.min.js"></script>
<script src="/static/editormd/lib/prettify.min.js"></script>
<script src="/static/editormd/lib/raphael.min.js"></script>
<script src="/static/editormd/lib/underscore.min.js"></script>
<script src="/static/editormd/lib/sequence-diagram.min.js"></script>
<script src="/static/editormd/lib/flowchart.min.js"></script>
<script src="/static/editormd/lib/jquery.flowchart.min.js"></script>
<script src="/static/editormd/editormd.js"></script>
<script src="/LayuiBlog/js/BGM.js"></script>
<script src="/LayuiBlog/js/detailcomment.js"></script>
<!--<script src="/LayuiBlog/js/detailcomment2.js"></script>-->
<!--<script src="/LayuiBlog/js/detailcomment3.js"></script>-->
<!--代码高亮-->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>

<script type="text/javascript">
    $(function () {
        var testView = editormd.markdownToHTML("test-markdown-view", {
            htmlDecode: "style,script,iframe",
            emoji: true,
            taskList: true,
            tex: true,  // 默认不解析
            flowChart: true,  // 默认不解析
            sequenceDiagram: true,  // 默认不解析
            codeFold: true,
            previewCodeHighlight: true,
        });
    });
</script>

</body>
</html>